<template>
    <div class="datasource">
        <h5>使用数据源</h5>
        <div>
            <label>
                <input type="radio" value="allow" v-model="data.enable">
                允许数据源
            </label>
            <label>
                <input type="radio" value="none" v-model="data.enable">
                禁止数据源
            </label>
            <label>
                <input type="radio" value="force" v-model="data.enable">
                强制数据源
            </label>
        </div>
        <h5>数据源sql</h5>
        <div>
            <textarea v-model="data.sql" class="form-control input-sm" rows="5"></textarea>
            <font style="color:red; font-size: 12px;">提示：可使用[占位符]来使用已经赋值的字段，目前可用的占位符:[用户ID], [起始参数]</font>
        </div>
    </div>
</template>

<script>
   var component = {
       props:["data"],
       data(){
            return {}
       },
       created(){
           this.data = this.data || {};
           this.data.sql = this.data.sql || "";
           this.data.enable = this.data.enable || "none";
       }
   }
</script>
<style>
    .datasource{
        padding-left: 10px;
        padding-right: 10px;
    }
    .datasource h5{
        font-weight: bold;
    }
    .datasource label{
        margin-right: 10px;
        font-weight: normal;
    }
    .datasource font{
        font-size: 12px;
        margin-top: 10px;
    }
</style>